<script setup>
import { ref, onMounted } from "vue"
import {
  getUnsubmitHomeworkAPI,
  uploadFileAPI,
  submitHomeworkAPI
} from "@/api/student"
import { ElMessage } from "element-plus"

const unsubmitHomework = ref([]) // 待提交作业列表

const dialogVisible = ref(false)
const currentHomework = ref(null)
const fileList = ref([]) // 上传的文件列表

const getUnsubmitHomework = async () => {
  try {
    const { data } = await getUnsubmitHomeworkAPI()
    if (data.code === 200) {
      unsubmitHomework.value = data.data
    } else {
      ElMessage.error(data.msg || "获取待提交作业失败")
    }
  } catch (error) {
    console.error("获取待提交作业失败:", error)
    ElMessage.error("获取待提交作业失败")
  }
}

const handleSubmit = (homework) => {
  currentHomework.value = homework
  fileList.value = []
  dialogVisible.value = true
}
const remark = ref("") // 作业备注
const handleUpload = async () => {
  if (!fileList.value.length) {
    ElMessage.warning("请先选择文件")
    return
  }
  const formData = new FormData()
  formData.append("file", fileList.value[0].raw)
  try {
    // 上传文件
    const { data: uploadRes } = await uploadFileAPI(formData)
    if (uploadRes.code !== 200) {
      ElMessage.error(uploadRes.msg || "文件上传失败")
      return
    }
    console.log("文件上传成功", uploadRes)
    // 提交作业
    const submitData = {
      assignmentId: currentHomework.value.assignmentId,
      filePath: uploadRes.data,
      remark: remark.value
    }
    const { data: submitRes } = await submitHomeworkAPI(submitData)
    if (submitRes.code === 200) {
      ElMessage.success("作业提交成功！")
      dialogVisible.value = false
      getUnsubmitHomework()
    } else if (submitRes.code === 500) {
      ElMessage.warning(submitRes.msg || "作业提交失败")
    }
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  getUnsubmitHomework()
})
</script>

<template>
  <div class="submit-homework-container">
    <h2>待提交作业</h2>
    <el-table :data="unsubmitHomework" style="width: 100%">
      <el-table-column prop="assignmentId" label="作业ID" width="100" />
      <el-table-column prop="title" label="作业标题" />
      <el-table-column prop="description" label="作业描述" />
      <el-table-column prop="dueDate" label="截止日期" width="180" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleSubmit(scope.row)">提交</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 上传作业弹窗 -->
    <el-dialog v-model="dialogVisible" title="上传作业" width="400px" :close-on-click-modal="false">
      <div>
        <p>作业标题：{{ currentHomework?.title }}</p>
        <el-upload
          v-model:file-list="fileList"
          :limit="1"
          :auto-upload="false"
          :show-file-list="true"
          accept=".doc,.docx,.pdf,.zip,.rar,.7z,.txt,.jpg,.png"
        >
          <el-button type="primary">选择文件</el-button>
        </el-upload>
        <el-input v-model="remark" type="textarea" placeholder="作业备注" :rows=4 style="margin-top: 10px;" />
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpload">上传并提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.submit-homework-container {
  padding: 20px;
}
h2 {
  margin-bottom: 20px;
}
</style> 